<template>
	<view class="page">
		<u-swiper radius="10" interval="5000" :list="swiper" :indicator="false" height="300" @click="toPage"></u-swiper>
		<writers :dataList="authors"></writers>
		<u-loadmore v-if="authors.length!=0" fontSize="20" iconSize="20" loadingIcon="circle" loadingText="加载更多"
			nomoreText="" :status="status" />
	</view>
</template>

<script>
	import writers from "../../components/writer-item/writer-item.vue"
	export default {
		data() {
			return {
				swiper: [],
				authors: [],
				page: 1,
				lastPage: 1,
				status: 'nomore'
			}
		},
		onReady() {
			// uni.showLoading({
			// 	title: '加载中'
			// });
		},
		onReachBottom() {
			if (this.authors.length != 0) {
				setTimeout(() => {
					this.page++
					if (this.page <= this.lastPage) {
						this.getAuthors()
					} else {
						this.status = 'nomore';
					}
				}, 100)
			}
		},
		onLoad() {
			this.getCreatorSwiper()
			this.getAuthors('onload')
		},
		methods: {
			// 轮播图跳转页面
			toPage(index) {
				const item = this.swiper[index]
				// 0=无动作 1=文章 2=指定页面
				if (item.jump_type != 0) {
					uni.navigateTo({
						url: item.toPage
					})
				}
			},
			getCreatorSwiper() {
				this.$api.getCreatorSwiper().then((res) => {
					this.swiper = res.data
				})
			},
			getAuthors(type) {
				this.$api.getAuthors(this.page).then((res) => {
					this.lastPage = res.data.last_page
					if (type == 'onload') {
						// setTimeout(() => {
						// 	uni.hideLoading();
						// }, 100)
					}
					if (res.data.data.length == 0) {
						this.status = 'nomore';
					} else {
						this.status = 'loading';
						this.authors = [...this.authors, ...res.data.data];
					}
				})
			},
		},
		components: {
			writers
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 8rpx;
	}

	.content {
		padding: 30rpx 0;
		margin-top: 10rpx;
		// border-bottom: 1px solid #C0C0C0;
	}

	.images {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		padding: 0 18rpx;
	}

	.roundrect {
		border-radius: 20rpx;
	}

	.tit {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		font-size: 26rpx;
	}

	.newest {
		margin: 40rpx 0;
	}

	.newest-img {
		display: flex;
		overflow-x: auto;
		margin-right: -20rpx;

		.item {
			margin-right: 20rpx;
		}

		.main-img {
			width: 400rpx;
			height: 200rpx;
		}

		.img-list {
			display: flex;
			justify-content: space-between;

			image {
				width: 130rpx;
				height: 100rpx;
			}
		}
	}

	.recommend {
		margin: 0;
		margin-top: 60rpx;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
	}
</style>
